<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html><!-- This web page is copied by "https://bazhan.wang" --><html><head><meta charset="utf-8">

<title>充值榜豆</title>
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" href="/layui/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="/iqianfeng/css/common2.css">
<link rel="stylesheet" href="/iqianfeng/css/chongzhi.css">
<link rel="stylesheet" href="/iqianfeng/css/kefami.css">
<link rel="stylesheet" type="text/css" href="/iqianfeng/css/amazeui.min.css" />
<link rel="stylesheet" type="text/css" href="/iqianfeng/css/main.css" />
</head>
<body>
<div id="header"></div>
<div id="header-logo">

    <div class="header-logo-text">
        <i class="recommend-pic header-logo-img"></i>
        <span class="header-logo-chongzhi">117充值</span>
    </div>
</div>

<div class="new_admin_main" >
    <div class="chongzhi-explain">
        <div class="chongzhi-explain-title">充值说明</div>
        <div class="chongzhi-explain-tate">1招兵币/元</div>
        <ul class="chongzhi-explain-content">
            <li>招兵币可以用来购买新榜相关增值服务及包月包年等；</li>
            <li>招兵币是属于消费科目，不可兑现。</li>
        </ul>
        <div class="chongzhi-service">联系客服</div>
    </div>
    <div class="chongzhin-details">
        <div class="chongzhi-details-title">详情</div>
        <div class="chongzhi-details-content">
            <div class="pay">
                <!--主内容开始编辑-->
                <div class="tr_recharge">
                    <div class="tr_rechtext">
                        <p class="te_retit"><img src="/iqianfeng/img/coin.png" alt="" />充值中心</p>
                        <p>1.招兵币是51招兵买马退出的虚拟货币，你可以使用招兵币购买站内的简历。</p>
                        <p>2.招兵币与人民币换算为1：1，即1元=1招兵币，你可以选择支付宝或者是微信的付款方式来进行充值，招兵币每次10个起充。</p>
                    </div>
                    <form action="" class="am-form" id="doc-vld-msg">
                        <div class="tr_rechbox">
                            <div class="tr_rechhead">
                                <img src="/iqianfeng/img/2.gif" />
                                <p>充值帐号：
                                    <input type="hidden" id="phoneNum" name="phoneNum" value="${advertisersAccount.phoneNum}">${advertisersAccount.phoneNum}</input>
                                </p>
                                <div class="tr_rechheadcion">
                                    <img src="/iqianfeng/img/coin.png" alt="" />
                                    <span>当前余额：<span>${advertisersAccount.advertisersWallet.availableBalance}</span></span>
                                </div>
                            </div>
                            <div class="tr_rechli am-form-group">
                                <ul class="ui-choose am-form-group" id="uc_01">
                                    <li>
                                        <label class="am-radio-inline">
                                            <input type="radio"  value="" name="availableBalance" required data-validation-message="请选择一项充值额度"> 10￥
                                        </label>
                                    </li>
                                    <li>
                                        <label class="am-radio-inline">
                                            <input type="radio" name="availableBalance" data-validation-message="请选择一项充值额度"> 20￥
                                        </label>
                                    </li>

                                    <li>
                                        <label class="am-radio-inline">
                                            <input type="radio" name="availableBalance" data-validation-message="请选择一项充值额度"> 50￥
                                        </label>
                                    </li>
                                    <li>
                                        <label class="am-radio-inline">
                                            <input type="radio" name="availableBalance" data-validation-message="请选择一项充值额度"> 其他金额
                                        </label>
                                    </li>
                                </ul>
                                <!--<span>1招兵币=1元 10元起充</span>-->
                            </div>
                            <div class="tr_rechoth am-form-group">
                                <span>其他金额：</span>
                                <input type="number" min="10" max="100000" value="10.00元" class="othbox" data-validation-message="充值金额范围：10-100000元" />
                                <!--<p>充值金额范围：10-10000元</p>-->
                            </div>
                            <div class="tr_rechcho am-form-group">
                                <span>充值方式：</span>
                                <label class="am-radio">
                                    <input type="radio" name="radio1" value="" data-am-ucheck required data-validation-message="请选择一种充值方式"><img src="/iqianfeng/img/wechatpay.png"/>
                                </label>
                                <label class="am-radio" style="margin-right:30px;">
                                    <input type="radio" name="radio1" value="" data-am-ucheck data-validation-message="请选择一种充值方式"><img src="/iqianfeng/img/zfbpay.png"/>
                                </label>
                            </div>
                            <div class="tr_rechnum">
                                <span>应付金额：</span>
                                <span class="rechnum" id="availableBalance">0.00</span>
                            </div>
                        </div>
                        <div class="tr_paybox">
                            <button onclick="addAmount()" value="" class="tr_pay am-btn">确认支付</button>
                            <span>温馨提示：招兵币只限于在简历详情中购买简历，遇到问题请拨打联系电话。</span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="chongzhi-succeed"></div>
<div class="chongzhi-defeated"></div>


<div id="footer"></div>
<script src="/layui/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/iqianfeng/js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="/iqianfeng/js/amazeui.min.js"></script>
<script type="text/javascript" src="/iqianfeng/js/ui-choose.js"></script>

<script type="text/javascript">
    var num = 0;
    // 将所有.ui-choose实例化
    $('.ui-choose').ui_choose();
    // uc_01 ul 单选
    var uc_01 = $('#uc_01').data('ui-choose'); // 取回已实例化的对象
    uc_01.click = function(index, item) {
        console.log('click', index, item.text())
    }
    uc_01.change = function(index, item) {
        console.log('change', index, item.text())
    }
    $(function() {
        $('#uc_01 li:eq(3)').click(function() {
            $('.tr_rechoth').show();
            $('.tr_rechoth').find("input").attr('required', 'true')
            $('.rechnum').text('10.00');
        })
        $('#uc_01 li:eq(0)').click(function() {
            $('.tr_rechoth').hide();
            $('.rechnum').text('10.00');
            $('.othbox').val('');
        })
        $('#uc_01 li:eq(1)').click(function() {
            $('.tr_rechoth').hide();
            $('.rechnum').text('20.00');
            $('.othbox').val('');
        })
        $('#uc_01 li:eq(2)').click(function() {
            $('.tr_rechoth').hide();
            $('.rechnum').text('50.00');
            $('.othbox').val('');
        })
        $(document).ready(function() {
            $('.othbox').on('input propertychange', function() {
                num = $(this).val();
                $('.rechnum').html(num + ".00");
            });
        });
    })

    $(function() {
        $('#doc-vld-msg').validator({
            onValid: function(validity) {
                $(validity.field).closest('.am-form-group').find('.am-alert').hide();
            },
            onInValid: function(validity) {
                var $field = $(validity.field);
                var $group = $field.closest('.am-form-group');
                var $alert = $group.find('.am-alert');
                // 使用自定义的提示信息 或 插件内置的提示信息
                var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

                if(!$alert.length) {
                    $alert = $('<div class="am-alert am-alert-danger"></div>').hide().
                    appendTo($group);
                }
                $alert.html(msg).show();
            }
        });
    });
    function addAmount() {
        var $ = layui.jquery;

        var phoneNum = document.getElementById("phoneNum").value;
        let elementsByClassName = document.getElementsByClassName("availableBalance");
        // alert(num)

        $.ajax({
            url: '/front/addAmount?phoneNum=' + phoneNum + '&availableBalance=' + num,
            type: 'post',
            dataType: 'json',
            success: function (result) {
                if (result.code == '0') {
                    window.location = '/front/topUp';
                } else {
                    layer.msg(result.msg)
                }
            }
        });
    }
</script>


</body>
</html>
